<template>
  <div id="divID" class="login_container">
    <div class="login_box">
      <el-form ref="form" :model="form" label-width="80px" class="login_form">
        <el-form-item label="用户名">
          <el-input size="small" v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input size="small" v-model="form.pass" type="password"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button size="mini" type="primary" @click="onSubmit">登录</el-button>
          <el-button size="mini" @click="register">注册</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
import axios from 'axios'
  export default {
      data() {
        return {
          form: {
            name: '',
            pass: ''
          },
          dialogFormVisible: false
        }
      },
      methods: {
				logOut(){
						console.log('logOut')
						axios.delete(`/api/music/logout/`)
						  .then((resultData) =>{
							  var status = resultData.data.status
							  if(status===204){
								
								 
								this.$message({
										    message: resultData.data.message,
										    type: 'success'
										    })
								// this.$router.push({name:"Login"})
								
							  }
						    })
						  .catch()  
				},
        /* 登录方法*/
        onSubmit() {

          const params ={
            account_username:this.form.name,
            account_pwd:this.form.pass,
          }

          const config = {
            headers: {
              'X-CSRFToken': this.$cookies.get("csrftoken")       // return value
				// 'X-CSRFToken':"dvnqzjmIqTjgV5lHlWpUnkxDdp6AdnVh4vz8"
            }
          }
					console.log(config.headers)
		console.log(params)
          axios.post(`/api/music/login/`,params, config)
            .then((resultData) =>{
              console.log(resultData.data)
			  var status = resultData.data.status
			  if(status===200){
				  this.$message({
				                  message: resultData.data.message,
				                  type: 'success'
				                })
				  this.$router.push({"name": "Main"})
			  } else {
				  this.$message({
				  		    message: resultData.data.message,
				  		    type: 'error'
				  		    })
			  }
            })
            .catch((e)=>{
              console.log(e)
            })

      },
      /* 注册方法*/
      register() {
        /* 打开弹窗 */
        this.dialogFormVisible = true
      },

    },
	created() {
		this.logOut()
	}
    }
</script>

<style scoped>
  .login_container{
    /* background-color: #409EFF;
    height: 50vh; */
  }
  .login_box{
    width: 450px;
    height: 300px;
    background-color: #0077AA;
    border-radius: 3px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);

  }

  .login_form{
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
     color:#000000;
  }
</style>
